import * as React from 'react'
import style from './style.module.less'
import { useEffect, useState } from 'react'
import { store } from '../../mobx/Store'
import { Link } from 'react-router-dom'

function Put_done() {
  const [id, setID] = useState<string>('')

  useEffect(() => {
    output()
  }, [])

  async function output() {
    setID(
      window.location.href.slice(-36, -1) +
        window.location.href[window.location.href.length - 1],
    )
  }

  return (
    <div>
      <header className={style.top}>
        <div className={style.top_main}>
          <Link className={style.top_img} to="/">
            时间胶囊
          </Link>
          <div>
            <Link className={style.top_back} to="/">
              首页
            </Link>
            <Link className={style.top_put} to="/put">
              添加
            </Link>
            <Link className={style.top_open} to="/open">
              打开
            </Link>
          </div>
          <div className={style.changColor} onClick={() => store.setClick()}>
            更换主题
          </div>
        </div>
      </header>
      <main className={style.bottom}>
        <div className={style.container}>
          <h1 className={style.page_header}>胶囊添加成功</h1>
          <div className={style.main}>
            <form>
              <label>胶囊Key</label>
              <input
                className={style.content}
                type="text"
                value={id}
                readOnly={true}
                style={{ width: '220px' }}
              />
              <span style={{ padding: '8px' }}>
                你可以复制 key自己保存，也可以发送给你的好友，让他来打开胶囊。{' '}
              </span>
            </form>
          </div>
        </div>
      </main>
    </div>
  )
}

export default Put_done
